<template>
    <div class="banner">
      <div class="fixed" @mouseleave="mouseLeave">
        <img class="mt" @mouseover="mouseOver"  :src="mtUrl">
        <div class="mt1box">
          <img class="mt1" :src="mt1Url" :style="active">
        </div>
      </div>
      <div class="cate_menu">
        <ul>
          <li v-for="menu of meun_list" :key="menu.id">
            <a href="#">{{menu.category}}</a>
          </li>
        </ul>
      </div>
      <div class="about">
          <div class="swiper-container" id="swiper1">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../../../assets/images/hmkd.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../../../assets/images/dn.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../../../assets/images/zbq.jpg" alt=""></div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev swiper-button-white"></div>
          <div class="swiper-button-next swiper-button-white"></div>

          <!-- 如果需要滚动条 -->
          <!--    <div class="swiper-scrollbar"></div>-->
          </div>
      </div>
      <div class="recommend">
          <div class="swiper-container" id="swiper2">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="../../../assets/images/s2.jpg" alt="">
              <img src="../../../assets/images/s1.jpg" alt="">
              <img src="../../../assets/images/s3.jpg" alt="">
            </div>
            <div class="swiper-slide ">
              <img src="../../../assets/images/s2.jpg" alt="">
              <img src="../../../assets/images/s1.jpg" alt="">
              <img src="../../../assets/images/s3.jpg" alt="">
            </div>
          </div>
            <!-- <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div> -->
          </div>
      </div>
      <div class="fos_3">
        <div class="login">
          <div class="loginBox">
            <div class="loginImg">
                  <img src="../../../assets/images/user.png" alt="">
              </div>
              <div class="loginContent">
                <a>Hi~欢迎逛京东!</a>
                <a>登录 &nbsp; | &nbsp;注册</a>
              </div>
          </div>
          <div class="buttonBox">
            <a href="#">新人福利</a>
            <a href="#">PLUS会员</a>
          </div>
        </div>
        <div class="news">
          <div class="title">
            <h2>京东快报</h2>
            <a class="more" href="#">更多&nbsp;></a>
          </div>
          <ul>
            <li v-for="new1 of news" :key="new1.id">
                <a href="#">{{new1.title}}</a>
                <a href="#">{{new1.content}}</a>
            </li>
          </ul>
        </div>
        <div class="service">
          <div class="serviceBox" v-for="service in services" :key="service.id">
            <div class="imgBox"><img :src="service.img" alt=""></div>
            <a href="#">{{service.service}}</a>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  name: 'HomeBanner',
  data: function () {
    return {
      mtUrl: require('../../../assets/images/mt.png'),
      mt1Url: require('../../../assets/images/mt1.png'),
      active: '',
      meun_list: [
        {id: 1, category: '家用电器'},
        {id: 2, category: '家用电器'},
        {id: 3, category: '家用电器'},
        {id: 4, category: '家用电器'},
        {id: 5, category: '家用电器'},
        {id: 6, category: '家用电器'},
        {id: 7, category: '家用电器'},
        {id: 8, category: '家用电器'},
        {id: 9, category: '家用电器'},
        {id: 10, category: '家用电器'},
        {id: 11, category: '家用电器'},
        {id: 12, category: '家用电器'},
        {id: 13, category: '家用电器'},
        {id: 14, category: '家用电器'}
      ],
      news: [
        {id: 1, title: 'HOT', content: '我是DJ你会爱我吗？答案是：'},
        {id: 2, title: '热门', content: '如果我是DJ你会爱我吗？'},
        {id: 3, title: '热门', content: '如果我是DJ你会爱我吗？'},
        {id: 4, title: '热门', content: '如果我是DJ你会爱我吗？'}
      ],
      services: [
        {id: 1, service: '话费', img: require('../../../assets/images/phone.png')},
        {id: 2, service: '话费', img: require('../../../assets/images/phone.png')},
        {id: 3, service: '话费', img: require('../../../assets/images/phone.png')},
        {id: 4, service: '话费', img: require('../../../assets/images/phone.png')},
        {id: 5, service: '话费', img: require('../../../assets/images/phone.png')},
        {id: 6, service: '话费', img: require('../../../assets/images/phone.png')},
        {id: 7, service: '话费', img: require('../../../assets/images/phone.png')},
        {id: 8, service: '话费', img: require('../../../assets/images/phone.png')},
        {id: 9, service: '话费', img: require('../../../assets/images/phone.png')},
        {id: 10, service: '话费', img: require('../../../assets/images/phone.png')},
        {id: 11, service: '话费', img: require('../../../assets/images/phone.png')},
        {id: 12, service: '话费', img: require('../../../assets/images/phone.png')}
      ]
    }
  },
  methods: {
    mouseOver: function () {
      this.active = 'z-index:99;width:800px;transition:all linear .3s;'
    },
    mouseLeave: function () {
      this.active = 'left:-300px;transition:all linear .3s;'
    }
  },
  mounted () {
    /* eslint-disable no-new */
    new Swiper('#swiper1', {
      loop: true,
      // 如果需要分页器
      pagination: '.swiper-pagination',
      // 如果需要前进后退按钮
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev'
    })
    new Swiper('#swiper2', {
      loop: true,
      // 如果需要分页器
      pagination: {
        el: '.swiper1'
      }
      // 如果需要前进后退按钮
      // nextButton: '.swiper-button-next',
      // prevButton: '.swiper-button-prev'
    })
  }
}
</script>

<style lang="stylus" scoped>
.banner
  position relative
  width 100%
  height 500px
  background #f4f4f4
  .fixed
    position relative
    top 1em
    width 28em
    transition all linear .3s
    img:first-child
      z-index 1
      position absolute
      left -9em
      cursor pointer
    .mt1box
      position absolute
      left 145px
      top 0
      width 790px
      height 470px
      overflow hidden
    img:last-child
      position absolute
      width 0px
      height 470px
      left 0px
      overflow hidden
  .cate_menu
    position absolute
    top 1em
    left 145px
    height 470px
    width 180px
    background-color #FFF
    ul
      display flex
      flex-direction column
      height 470px
      justify-content space-around
      li
        padding 10px
        a
          color #333
        a:hover
          color red
  .about
    position relative
    top 1em
    left 340px
    width 590px
    height 470px
  .recommend
    position absolute
    top 1em
    left 940px
    width 190px
    height 470px
    img
      display flex
      width 100%
      padding-bottom 10px
    img:last-child
      padding-bottom 0px
  .fos_3
    position absolute
    top 1em
    left 1140px
    width  190px
    height 470px
    padding 10px
    background-color #fff
    box-sizing border-box
    .login
      display flex
      flex-direction column
      border-bottom: 1px solid #eee
      .loginBox
        position relative
        padding 4px
        float left
        align-items center
        .loginImg
          float left
          width 40px
          height 40px
          overflow hidden
          border-radius 20px
          img
            width 100%
            overflow hidden
        .loginContent
          float left
          margin-top 6px
          margin-left 15px
          display flex
          flex-direction column
          a
            color #333
            font-size 12px
            cursor pointer
          a:first-child
            line-height 12px
            margin-bottom 4px
      .buttonBox
        position relative
        padding 10px
        a
          display inline-block
          width 70px
          height 26px
          line-height 26px
          border-radius 13px
          font-size 12px
          text-align center
        a:first-child
          background #E1251B
          color #fff
        a:last-child
         background #363634
         color #D4AF37
        a:first-child:hover
          background #C81623
        a:last-child:hover
          color #fff
          background #C81623
    .news
      margin-top 6px
      display flex
      flex-direction column
      .title
        display flex
        justify-content space-between
        align-items center
        h2
          font-size 14px
          font-weight 700
        a
          padding 10px
          color #ccc
          font-size 12px
      ul
        height 90px
        margin-left 6px
        li
          display flex
          justify-content center
          padding 2px 0
          a
            display inline-block
            font-size 12px
            color #333
          a:first-child
            width 30px
            height 16px
            line-height 16px
            text-align center
            background #FADCDA
            color #EC7771
            margin-right 2px
          a:last-child
            width 140px
            height 16px
            line-height 16px
            text-align center
            overflow hidden
            white-space nowrap
            text-overflow ellipsis
    .service
      position relative
      display flex
      justify-content space-around
      align-items center
      flex-wrap wrap
      width 180px
      height 220px
      left -10px
      .serviceBox
        display flex
        flex-direction column
        align-items center
        width 60px
        height 50px
        .imgBox
          width 30px
          height 30px
          img
            display block
            text-align center
            width 100%
            overflow hidden
        a
          font-size 12px
          color #333
          text-align center
</style>
